<template>
  <div class="registerFom">
    <div class="loginBak">
      <img src="../../../assets/image/login/bac.png" alt="" srcset="" />
    </div>
    <div class="login">
      <div class="loginFormBox">
        <div class="jusCenter">
          <div class="logo center">
            <img src="../../../assets/image/login/logo.png" alt="" srcset="" />
          </div>
        </div>
        <div class="hint">
          <div class="hintTitle jusCenter">{{ $t('messages.login.hintTitle') }}</div>
          <div class="hintSize jusCenter">{{ $t('messages.login.hintSize') }}</div>
        </div>
        <div class="formData center">
          <el-form
            inline
            :model="form"
            label-width="auto"
            style="display: flex; flex-wrap: wrap; justify-content: center"
          >
            <el-form-item>
              <div class="center uploadBox">
                <el-upload
                  :file-list="fileList"
                  :action="baseURL2 + 'api/uploadAvatar'"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="handSuccessFnEn"
                >
                  <el-icon><Plus /></el-icon>
                </el-upload>
              </div>
            </el-form-item>
          </el-form>
          <el-form
            inline
            :model="form"
            label-width="auto"
            style="display: flex; flex-wrap: wrap; justify-content: center"
          >
            <el-form-item>
              <el-input
                :prefix-icon="Avatar"
                placeholder="Please Store Name"
                class="formInput"
                v-model="form.name"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                :prefix-icon="Avatar"
                placeholder="Please Contact Persor"
                class="formInput"
                v-model="form.linkman"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                :prefix-icon="Phone"
                placeholder="Please phone"
                class="formInput"
                v-model="form.phone"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                :prefix-icon="email"
                placeholder="Please email"
                class="formInput"
                v-model="form.email"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                :prefix-icon="User"
                placeholder="Please account"
                class="formInput"
                v-model="form.account"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                :prefix-icon="Lock"
                placeholder="Please password"
                class="formInput"
                v-model="form.password"
              />
            </el-form-item>
            <el-form-item>
              <el-select
                @change="selectCountryFN"
                class="formInput"
                v-model="form.country"
                placeholder="Select country"
              >
                <el-option
                  v-for="(item, index) in countryEn"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-cascader
                class="formInput"
                v-model="form.region"
                :options="regData"
                placeholder="Select Region"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                :prefix-icon="Location"
                placeholder="Please address"
                class="formInput"
                v-model="form.address"
              />
            </el-form-item>
            <el-form-item>
              <el-select class="formInput" v-model="form.type" placeholder="Select type">
                <el-option
                  v-for="(item, index) in agency"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="margin: 0; margin-bottom: 20px">
              <el-select
                v-model="form.crossDomain"
                placeholder="Select transregional"
                class="formInput"
              >
                <el-option label="No" value="1" />
                <el-option label="Yes" value="0" />
              </el-select>
            </el-form-item>
          </el-form>
          <div class="footButton">
            <div @click="registerFn" class="button center">
              {{ $t('messages.login.register') }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible">
      <img style="width: 100%; heigth: 100%" w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script setup>
import { cityData, cityDataUS } from '@/components/js/addressOptions'
import { baseURL } from '@/http/request.js'
import { User, Lock, Avatar, Plus, Phone, Location } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { registerStore } from '@/http/api/login.js'
import { useRouter } from "vue-router"
const router = useRouter()
let baseURL2 = baseURL
let form = reactive({})
let fileList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
let regData = ref([])
let agency = [
  {
    value: '施工店',
    label: 'Construction shop'
  },
  {
    value: '授权店',
    label: 'Authorized Store'
  },
  {
    value: '旗舰店',
    label: 'flagship store'
  },
  {
    value: '市级运营商',
    label: 'Municipal level agents'
  },
  {
    value: '省级代理商',
    label: 'Provincial agents'
  }, {
    value: '国家级代理商',
    label: 'Country and agents'
  }
]
let countryZh = [
  { label: '美国', value: 'US' },
  { label: '中国', value: 'CN' },
  { label: '阿联酋（迪拜）', value: 'AE' },
  { label: '印度 ', value: 'India' },
  { label: '马来西亚', value: 'Malaysia' },
  { label: '荷兰 ', value: 'Netherlands' },
  { label: '秘鲁 ', value: 'Peru' },
  { label: '萨尔瓦多', value: 'El Salvador' },
  { label: '沙特阿拉伯 ', value: 'Saudi Arabia' },
  { label: '韩国 ', value: 'South Korea' },
  { label: '泰国 ', value: 'Thailand' },
  { label: '越南 ', value: 'Vietnam' },
  { label: '俄罗斯 ', value: 'Russia' },
  { label: '墨西哥 ', value: 'Mexico' },
  { label: '埃及 ', value: 'Egypt' },
  { label: '阿姆斯特丹 ', value: 'Amsterdam ' },
]
let countryEn = [
  { label: 'United States', value: 'US' },
  { label: 'China', value: 'CN' },
  { label: 'United Arab Emirates (Dubai)', value: 'AE' },
  { label: 'India', value: 'India' },
  { label: 'Malaysia', value: 'Malaysia' },
  { label: 'Netherlands', value: 'Netherlands' },
  { label: 'Peru', value: 'Peru' },
  { label: 'El Salvador', value: 'El Salvador' },
  { label: 'Saudi Arabia', value: 'Saudi Arabia' },
  { label: 'South Korea', value: 'South Korea' },
  { label: 'Thailand', value: 'Thailand' },
  { label: 'Vietnam', value: 'Vietnam' },
  { label: 'Russia', value: 'Russia' },
  { label: 'Mexico', value: 'Mexico' },
  { label: 'Egypt', value: 'Egypt' },
  { label: 'Amsterdam', value: 'Amsterdam' },
]
const goRegisterFn = () => {

}
const registerFn = async () => {
  try {
    const res = await registerStore(form)
    ElMessage({
      message: res.message,
      type: res.status == 1 ? 'success' : 'error',
    })
    router.push('/login')
  } catch (error) {
    ElMessage({
      message: '注册失败',
      type: 'error',
    })
  }

}
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}
const selectCountryFN = () => {
  console.log(form.country)
  if (form.country == 'US') {
    regData.value = cityDataUS
  } else {
    regData.value = cityData
  }
  console.log(regData)
}
const handlePictureCardPreview = (uploadFile) => {
  dialogVisible.value = true
  dialogImageUrl.value = uploadFile.response.image_url
}
// successfully upload
const handSuccessFnEn = (data) => {
  form.image = data.image_url
}
</script>

<style lang="scss" scoped>
.uploadBox {
  width: 400px;
}
.registerFom {
  height: 1400px;
  position: relative;
  overflow: hidden;
  .loginBak {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .login {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
  }
}
.formInput {
  width: 400px;
  height: 80px;
}
.logo {
  width: 250px;
  height: 250px;
  img {
    width: 100%;
    height: 100%;
  }
}
.hint {
  .hintTitle {
    font-size: 23px;
    color: #ffdd00;
  }
  .hintSize {
    font-size: 19px;
    color: #ffdd00;
  }
}
.footButton {
  width: 400px !important;
}
.button {
  width: 400px !important;
  height: 80px;
  background: #ffdd00;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}
.button:active {
  opacity: 0.9;
}
.size {
  color: #ffdd00;
  cursor: pointer;
}
.size:hover {
  text-decoration: underline;
}
::v-deep .el-input {
  width: 400px;
  height: 80px;
}
::v-deep .el-select__wrapper {
  width: 400px;
  height: 80px;
}
</style>